@import "../variables.less";
@import "../block.less";
@import "../animation/fadeInOut.less";

@assets-bg: url("$assets/bg.jpg");
@assets-user-login: url("$assets/user_login.png");
@assets-home-img-border: url("$assets/home-img-border.png");
@assets-container-box: url("$assets/container-box.png");
@assets-bubble1: url("$assets/bubble1.png");
@assets-bubble2: url("$assets/bubble2.png");
@assets-connect-customer-wechat-num-copy: url("$assets/connect_customer/wechat_num_copy.png");

.container {
  .full-content();

  position: relative;
  max-width: 68vh;
  margin: 0 auto;
  overflow: auto;
  background: @assets-bg no-repeat center center;
  background-size: cover;

  .header {
    position: relative;

    &__user {
      position: absolute;
      top: 9px;
      left: 13px;
      width: 99px;
      height: 14.5px;
      font-size: 9px;
      line-height: 14.3px;
      color: @primary-color;
      text-align: center;
      background: @assets-user-login no-repeat;
      background-size: 99px 14.5px;

      & > a {
        color: @primary-color;
        text-decoration: underline;
      }
    }

    &__staff {
      position: absolute;
      top: 9px;
      right: 13px;
      width: auto;
      height: 14.5px;
      padding: 0 10px;
      font-size: 9px;
      line-height: 14.3px;
      text-align: center;
      background: @assets-user-login no-repeat;
      background-size: 99px 14.5px;

      & > a {
        color: @primary-color;
        text-decoration: underline;
      }
    }
  }

  .main {
    text-align: center;

    &__logo {
      width: 77px;
      height: 36px;
      margin-top: 20px;
    }

    &__title {
      width: 283px;
      height: 86px;
      margin-top: 2px;
    }

    &__hero {
      display: flex;
      width: 300px;
      height: 53px;
      margin: 0 auto;
      align-items: center;
      flex-direction: row;
      background: @assets-home-img-border no-repeat center center;
      background-size: cover;

      .hero {
        &__logo {
          height: 30px;
          padding: 0 12px;

          & > img {
            width: 29px;
          }
        }

        &__info {
          height: 36px;
          line-height: 16px;
          text-align: left;
          flex: 1;

          .info {
            &__link {
              & > a {
                font-size: 11px;
                font-weight: bold;
                color: #ffe684;
                text-decoration: underline;
              }
            }

            &__note {
              font-size: 10px;
              color: @primary-color;
            }
          }
        }

        &__percent {
          height: 24px;
          padding: 0 12px;
          line-height: 24px;

          & > img {
            height: 24px;
          }
        }
      }
    }

    &__twister {
      position: relative;
      width: 340px;
      height: 55vh;
      margin: 0 auto;
      background: @assets-container-box no-repeat center center;
      background-size: 90% 90%;
      background-position-y: 10px;

      .twister {
        &__left {
          position: absolute;
          top: 23%;
          left: 30px;

          .left-container {
            position: absolute;
            left: -26px;
            width: 67.5px;
            height: 102px;
            background: @assets-bubble2 no-repeat center center;
            background-size: cover;
            animation: fadeInOut 3s infinite ease-in-out alternate;

            & > div {
              width: 70px;
              padding: 3.5px 7.5px 0 6.5px;
              font-size: 10px;
              color: @primary-color;

              & > span {
                color: #f9dc47;
              }
            }
          }
        }

        &__right {
          position: absolute;
          top: 10%;
          right: 11px;

          .right-container {
            width: 67.5px;
            height: 102px;
            background: @assets-bubble1 no-repeat center center;
            background-size: cover;
            animation: fadeInOut 3s infinite ease-in-out alternate;

            & > div {
              width: 70px;
              padding: 5px 12.5px 0 12px;
              font-size: 10px;
              color: @primary-color;

              & > span {
                color: #f9dc47;
              }
            }
          }
        }

        &__action {
          &-go {
            position: absolute;
            top: 48.7%;
            right: 0;
            left: 0;
            width: 70px;
            height: 55px;
            margin: 0 auto;
            cursor: pointer;
          }

          &-more {
            position: absolute;
            top: 77.7%;
            right: 0;
            left: 0;
            width: 131px;
            height: 46px;
            margin: 0 auto;
            cursor: pointer;
          }
        }

        &__tip {
          position: absolute;
          top: 70.9%;
          right: 0;
          left: 0;
          display: none;
          height: 10px;
          margin: 0 auto;
          font-size: 12px;
          line-height: 1.6px;
          letter-spacing: 2px;
          color: #fff2ad;

          .tip-total {
            color: #ffe432;
          }
        }
      }
    }
  }

  .footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 36PX;
    font-size: 12PX;
    line-height: 18PX;
    text-align: center;

    &__rule {
      color: #fff;
      text-decoration: underline;
    }

    &__copyright {
      height: 18PX;
      color: @primary-color;
    }
  }
}

.staff-modal {
  &__qrcode {
    text-align: center;

    & > img {
      width: 172px;
      height: 172px;
      margin-top: 24.5px;
    }
  }

  &__copy {
    width: 91px;
    height: 31px;
    margin: 12px auto 0 auto;
    background: @assets-connect-customer-wechat-num-copy no-repeat;
    background-size: contain;
  }
}
